<template>
  <div>
    <el-select v-model="value" placeholder="请选择" ref="selectCh">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button type="info"></el-button>
    <el-button type="info"></el-button>
    <el-button type="info" @click="getLable">获取值</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  methods: {
    getLable(value = "sss") {
      console.log(
        value,
        "1",
        this.$refs.selectCh.selectedLabel,
        "value=",
        this.$refs.selectCh.selected.label
      );
      return this.$refs.selectCh.selected.label;
    },
  },
  watch: {
    value: {
      handler(newName, oldName) {
        if (newName) {
          console.log("改变", newName, oldName);
          let label = this.$refs.selectCh.selected.label;
          console.log("父类", label);
        }
      },
    },
  },
};
</script>
